<template>

	<uni-swiper-dot :dotsStyles="dotsStyles" class="swiper" :info="list" :current="current" field="content"
		:mode="mode">
		<swiper autoplay :interval="3000" :duration="1000" class="swiper-box" @change="change">
			<swiper-item v-for="(item ,index) in list" :key="item.id">
				<view class="img">
					<image :src="item.img" mode="scaleToFill" @load="imgload"></image>
				</view>
			</swiper-item>
		</swiper>
	</uni-swiper-dot>


</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				mode: 'round',
				dotsStyles: {
					backgroundColor: 'rgba(85, 255, 127, 0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)',
					selectedBorder: '1px rgba(255, 255, 255, 0.9) solid'
				},
			}
		},
		components: {},
		props: {
			list: {
				type: Array,
				default () {
					return [{
						
					}]
				}
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			imgload() {
				this.$emit('imgload')
			}
		},
	}
</script>

<style scoped>
	.swiper {
	
	}

	.swiper-box {
		width: 100%;
		height: 450rpx;
	}

	.img {
		width: 100%;
		height: 450rpx;
	}

	.swiper image {
		display: block;
		width: 100%;
		height: 450rpx;
		background-size: contain;
	}
</style>
